<template>
	<view class="ContactUs" :style="{ height: webStyle.height }">
		<view class="page1" v-if="pageType == '定制数字人'">
			<!-- <image class="pic" @tap="savePhoto(imgPath + 'ContactUs/kefuQR.png')" :src="imgPath + 'ContactUs/sb.png'" mode="widthFix"></image> -->
			<view class="bgi">
				<image class="pic" :src="imgPath + 'ContactUs/cu3.png'" mode="aspectFill"></image>
			</view>
			<view class="bgi1">
				<image class="pic" :src="imgPath + 'ContactUs/cu2.png'" mode="widthFix"></image>
			</view>
			<view class="main">
				<view class="main-cont">
					<view class="top">
						<view class="text">快来联系我们,</view>
						<view class="text">提前解锁数字人定制服务!</view>
					</view>
					<view class="tips">
						<view class="text">只需要录制一-段视频，便可生成专属数字人。输入文字，随时随地为你生成真人口播视频。</view>
					</view>
					<view class="qr-code">
						<image class="pic" :src="imgPath + 'ContactUs/kefuQR.png'" mode="widthFix"></image>
					</view>
					<view class="save-pic" @tap="savePhoto(imgPath + 'ContactUs/kefuQR.png')">保存二维码到相册</view>
					<view class="tips">
						<view class="text tac">保存此二维码，使用微信扫一扫</view>
					</view>
				</view>
			</view>
		</view>
		<view class="page2" :style="{ height: webStyle.height }" v-if="pageType == '购买vip'">
			<image class="pic" @tap="savePhoto(imgPath + 'ContactUs/kefuQR.png')" :src="imgPath + 'ContactUs/sb2.jpg'" mode="widthFix"></image>
			<view class="clip-el"></view>
		</view>
	</view>
</template>

<script>
import { tools } from "../../utils/util";
export default {
	name: "ContactUs",
	data() {
		return {
			pageType: "",
			imgPath: tools.imgPath,
			systemInfo: {},
			webStyle: {
				height: ""
			}
		};
	},
	methods: {
		// 保存图片
		savePhoto(imageUrl) {
			console.log(1111111, imageUrl);
			// #ifndef H5
			uni.downloadFile({
				url: imageUrl,
				success: (downloadResult) => {
					console.log(2222222, downloadResult);
					if (downloadResult.statusCode === 200) {
						// 下载成功，保存图片到系统相册
						uni.saveImageToPhotosAlbum({
							filePath: downloadResult.tempFilePath,
							success: () => {
								console.log(33333333, downloadResult);
								uni.showToast({
									title: "图片保存成功"
								});
							},
							fail: (err) => {
								console.log("图片保存失败1", err);
								uni.showToast({
									title: "图片保存失败",
									icon: "none"
								});
							}
						});
					} else {
						console.log("图片保存失败2", err);
						uni.showToast({
							title: "图片下载失败",
							icon: "none"
						});
					}
				},
				fail: () => {
					uni.showToast({
						title: "图片下载失败",
						icon: "none"
					});
				}
			});
			// #endif
			// #ifdef H5
			let a = document.createElement("a");
			a.href = imageUrl;
			a.download = "downloaded-image.png";
			a.click();
			// #endif
		},
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
						}
						resolve(payload);
					}
				});
			});
		},
		//判断页面类型
		initPageType() {
			let ContactUs = uni.getStorageSync("ContactUs");
			if (ContactUs) {
				this.pageType = ContactUs.type;
			}
		}
	},
	created() {
		this.initSystemInfo();
		this.initPageType();
	}
};
</script>

<style lang="scss">
.ContactUs {
	width: 100%;
	overflow: auto;
	.page1 {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		.bgi {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0vw;
			left: 0vw;
			.pic {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
		.bgi1 {
			width: 100%;
			position: relative;
			.pic {
				width: 100%;
				display: block;
			}
		}
		.main {
			position: relative;
			flex: 1;
			box-sizing: border-box;
			padding: 0vw 6vw 3vw;

			.main-cont {
				background: rgba(255, 255, 255, 0.3);
				box-shadow: inset 2px 2px 4px rgba(102, 193, 205, 1), inset -2px -2px 4px rgba(24, 71, 179, 1);
				backdrop-filter: blur(5px);
				border-radius: 2.5vw;
				width: 100%;
				max-height: 100%;
				overflow: auto;
				box-sizing: border-box;
				padding: 6vw;
				.top {
					margin-top: 2vw;
					.text {
						font-size: 4.6vw;
						font-weight: 700;
						line-height: 6vw;
					}
				}
				.tips {
					margin-top: 5vw;
					.text {
						font-weight: 500;
						font-size: 3.5vw;
						line-height: 4vw;
						&.tac {
							text-align: center;
						}
					}
				}
				.qr-code {
					margin: 1vw auto;
					width: 52%;
					border-radius: 2vw;
					padding: 2vw;
					.pic {
						width: 100%;
						display: block;
					}
				}
				.save-pic {
					width: max-content;
					color: rgba(161, 77, 6, 1);
					font-weight: 700;
					background: linear-gradient(90deg, rgba(252, 234, 196, 1) 0%, rgba(246, 206, 165, 1) 100%);
					padding: 2vw 5vw;
					margin: 2vw auto;
					border-radius: 2vw;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	.page2 {
		width: 100%;
		position: relative;
		.pic {
			width: 100%;
			display: block;
		}
		.clip-el {
			position: absolute;
			width: 36vw;
			height: 6%;
			background: #fff;
			left: 32%;
			top: 21vh;
		}
	}
}
</style>
